<template>
	<view>
		<uni-forms ref="form" :modelValue="formData" :rules="rules">
			<uni-title title="分类选择" type="h1" v-if="value.length > 0"></uni-title>
			<uni-forms-item :label="item.name" :name="`class${index}`" v-for="item,index in value" :key="item.id">
				<uni-segmented-control 
					:current="0" 
					:values='item.list.map(item => item.name)' 
					@clickItem="onClassCheck(item.list[$event.currentIndex],index)"
					styleType="button" 
					activeColor="#0275d9" 
				/>
			</uni-forms-item>
			<uni-title title="价格与数量" type="h1"></uni-title>
			<uni-forms-item :label="isStock ? '进价' : '出价'" name="price">
				<uni-easyinput v-model.number="formData.price" type="number"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item label="数量" >
				<u-number-box v-model="formData.num"></u-number-box>
			</uni-forms-item>
			<uni-forms-item label="操作备注" name="note" >
				<uni-easyinput v-model="formData.note" type="textarea"></uni-easyinput>
			</uni-forms-item>
			<view class="price" >
				组合标价: <text>{{groupPrice}}$</text>
			</view>
			<view class="house_num" >
				现有库存: <text style="color: black;">{{houseNum}}</text>
			</view>
		</uni-forms>
	</view>
</template>

<script>
	import { getClassKeyHouse } from "@/request/index.js"
	export default {
		props:['value','defult','isStock',"houseNumInfo"],
		watch:{
			value:{
				handler(v){
					if(v && v.length > 0 ){
						let result = []
						v.forEach((item,index)=>{
							this.formData[`class${index}`] = ""
							result[index] = item.list[0] 
						})
						this.result = result
					}else{
						this.setClassKeyHouse("none")
					}
				},
				immediate:true
			},
			result:{
				handler(value){
					let idBase = ''
					value.forEach(item => {		
						 idBase += `${item.id};`
					})
					if (idBase.length === 0){
						idBase = 'none'
					}
					this.setClassKeyHouse(idBase)
				},
				immediate:true,
				deep:true,
				
			}
		},
		data() {
			return {
				// 表单数据
				formData: {
					num:1,
					price:0,
					note:""
				},
				houseNum:0,
				result:[],
				timer:0,
				rules: {
					// 对name字段进行必填验证
					price: {
						rules: [{
								required: true,
								errorMessage: '价格必填',
							},
							{
								validateFunction:(_1,value,_2,_3)=>{
									if (value >= 0 ){
										return true
									}else{
										return false
									}
								},
								errorMessage: '价格不能小于0',
							}
						]
					}
				}
			}
		},
		methods: {
			submit() {
				return this.$refs.form.validate()
			},
			onClassCheck(item,index){
				const oldResult = [...this.result]
				oldResult[index] = item
				this.result = oldResult
			},
			setClassKeyHouse(idBase){
				if(this.value.length > 0){
					const { timer } = this
					if (timer) {
						clearTimeout(timer)
						this.timer = 0
					}
					this.timer = setTimeout(async ()=>{
						if (this.value.length > 0){
							const reslult  = await getClassKeyHouse(idBase)
							this.houseNum = reslult
							this.timer = 0
						}
					},300)
				}else{
					this.houseNum = this.houseNumInfo?.house_num
				}
			}
		},
		computed:{
			 groupPrice(){
				 let result = 0;
				 this.result.forEach(item => {
					 result += item.price
				 })
				 return result * this.formData.num
			 }
		},
 
	}
</script>

<style lang="scss">
.price ,.house_num{
	font-size: 37rpx;
	font-weight: 700;
	text{
		color: red;
	}
}
.house_num{
	margin-top: 30rpx;
}
</style>
